<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极</title>
		<style type="text/css">
			.div{
				width: 200px;
				height: 100px;
				background-color: black;
				border-radius: 200px 200px 0px 0px;
				
			}
			.div2{
				width: 200px;
				height: 100px;
				background-color:yellow;
				border-radius: 0px 0px 200px 200px;
				position: relative;
				
			}
			.nei{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				top: 50px;
				z-index: 10;
			}
			.nei2{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: yellow;
				position: absolute;
				right: 0px;
				top: -50px;
				
			}
			.nei3{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: yellow;
				position: absolute;
				left: 35px;
				top: 35px;
				z-index: 10px;
			}
			.nei4{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				right: 35px;
				top: 35px;
				z-index: 10px;
				
			}
			.taiji{
				width: 200px;
				height: 200px;
				border: 0px solid;
				position: absolute;
			    border-radius: 50%;
			    box-shadow: 0px 0px 30px;
			    top: 0px;
			    left: 0px;
			}
			
		</style>
	</head>
	<body>
		<div class="taiji">
			<div class="div">
			<div class="nei">
				<div class="nei3"></div>
			</div>
		</div>
		
		<div class="div2">
			<div class="nei2">
				<div class="nei4"></div>
			</div>
		</div>
		</div>
		<script type="text/javascript">
			var l=0;
			var t=0;
			var lrot = 10;
			var trot = 10;
		setInterval(function(){
				var taiji = document.querySelector(".taiji");
				l=l+ lrot;
				t=t+ trot;
				if(l >= 1200){
					lrot = -10;
				}
				if (l<= 0) {
					lrot= 10;
				}
				if (t>= 480) {
					trot= -10;
				}
				if (t<= 0) {
					trot = 10;
				}
				taiji.style.left=l+"px";
				taiji.style.top=t+"px";
			},50)
		</script>